@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');

:root {
  --bg-gradient-light: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  --bg-gradient-dark: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
}

body {
  font-family: 'Noto Sans SC', sans-serif;
  transition: all 0.3s ease;
  background: #ffffff;
}

body.dark {
  background: var(--bg-gradient-dark);
  color: #ffffff;
}

body:not(.dark) {
  background: var(--bg-gradient-light);
  color: #1a1a1a;
}

/* 玻璃态卡片样式 */
.glass-card {
  @apply rounded-lg p-6 transition-all duration-300;
}

.dark .glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body:not(.dark) .glass-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(59, 130, 246, 0.1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

/* 悬停缩放效果 */
.hover-scale {
  @apply transition-transform duration-300;
}

.hover-scale:hover {
  @apply transform scale-105;
}

/* 导航链接样式 */
.nav-link {
  @apply flex items-center gap-3 px-4 py-2 rounded-lg transition-colors duration-200 text-gray-600 dark:text-gray-300 hover:bg-blue-50 dark:hover:bg-white/10;
}

/* 主题切换按钮样式 */
.theme-toggle {
  @apply fixed right-3 top-3 z-50 w-10 h-10 rounded-full flex items-center justify-center cursor-pointer transition-all duration-300 bg-white dark:bg-gray-800 shadow-lg dark:shadow-gray-900/30;
}

/* 侧边栏样式 */
.sidebar {
  @apply fixed left-0 top-0 h-screen w-36 py-6 px-4 transition-all duration-300 z-40;
  transform: translateX(0);
}

.sidebar.collapsed {
  transform: translateX(-120px);
  -webkit-transform: translateX(-120px);
  -moz-transform: translateX(-120px);
  -ms-transform: translateX(-120px);
  -o-transform: translateX(-120px);
}

.sidebar-toggle {
  @apply absolute -right-3 top-[50%] w-8 h-8 rounded-full flex items-center justify-center transition-transform duration-300 bg-white dark:bg-gray-800 shadow-lg transform translate-y-[-50%];
}

.collapsed .sidebar-toggle i {
  @apply rotate-180;
}

/* 主内容区域样式 */
.main-content {
  @apply ml-36 transition-all duration-300 min-h-screen pt-[64px];
}
/* 修改选择器，使用更通用的方式 */
body:has(.sidebar.collapsed) .main-content {
  margin-left: 24px !important;
}
/* 顶部导航栏样式 */
.topbar {
  @apply fixed top-0 left-0 right-0 h-16  pl-[160px] flex items-center justify-start px-6 z-30 transition-all duration-300 bg-white dark:bg-gray-800;
}


.sidebar.collapsed ~ .topbar {
  @apply left-[16px];
}

.nav-menu {
  @apply flex items-center gap-6;
}

.nav-item {
  @apply relative;
}

.nav-item > a {
  @apply flex items-center gap-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400;
}

.dropdown-menu {
  @apply absolute top-full left-0 mt-2 w-48 py-2 rounded-lg glass-card invisible opacity-0 transform translate-y-2 transition-all duration-200;
}

.nav-item:hover .dropdown-menu {
  @apply visible opacity-100 translate-y-0;
}

.dropdown-item {
  @apply flex items-center gap-0 px-2 py-1.5 text-gray-600 dark:text-gray-300 hover:bg-blue-50 dark:hover:bg-white/10 transition-colors duration-200;
}

/* @media (max-width: 768px) {
  .sidebar {
    @apply w-4/5 -translate-x-full;
  }

  .sidebar.collapsed {
    @apply -translate-x-full;
  }

  .main-content {
    @apply ml-0;
  }

  .nav-menu {
    @apply flex-col items-start;
  }

  .nav-item {
    @apply w-full;
  }

  .dropdown-menu {
    @apply left-0 w-full;
  }

  .container {
    @apply px-4;
  }
} */


.toast {
  position: fixed;
  top: 20px; /* 将 Toast 显示在顶部 */
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 5px;
  color: #fff;
  background-color: #333;
  opacity: 0.9;
  z-index: 10000;
  transition: opacity 0.3s ease;
}

.toast-info {
  background-color: #007bff;
}

.toast-success {
  background-color: #28a745;
}

.toast-error {
  background-color: #dc3545;
}